<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        div {
            position: relative;
            top: 0;

            width: 100px;
            height: 80px;
            background-color: pink;
        }
    </style>
</head>

<body>
    <div></div>
    <script>
        var div = document.querySelector('div')
        var data = {
            startX: 0,
            startY: 0,
            x: 0,
            y: 0,
            moveX: 0,
            moveY: 0
        }
        // var startX = 0
        // var startY = 0
        // var x = 0
        // var y = 0

        div.addEventListener('touchstart', function (e) {
            // 1.获取初始手指坐标和盒子的初始位置
            data.startX = e.targetTouches[0].pageX
            data.startY = e.targetTouches[0].pageY
            data.x = this.offsetLeft
            data.y = this.offsetTop
        })
        div.addEventListener('touchmove', function (e) {
            // 2.移动后的手指坐标 减去 初始的手指坐标 得到 移动距离
            data.moveX = e.targetTouches[0].pageX - data.startX
            data.moveY = e.targetTouches[0].pageY - data.startY
            // 3.移动距离 加上 原始盒子坐标 得到 最终盒子被拖动的位置 
            this.style.left = data.x + data.moveX + 'px'
            this.style.top = data.y + data.moveY + 'px'
            // 阻止屏幕滚动的默认行为（因touchmove有一个默认会滚出屏幕的功能 为了避免需要阻止）
            e.preventDefault()

        })


    </script>
</body>

</html>